<template>
  <el-affix>
    <div class="aaa" >
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" router
    >
        <el-menu-item index="0">LOGO</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="/"><el-icon>
            <House />
          </el-icon>首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title><el-icon>
              <Star />
            </el-icon>发现</template>
          <el-menu-item index="/GuiDang"><el-icon>
              <Collection />
            </el-icon>归档</el-menu-item>
          <el-menu-item index="/FenLei"><el-icon>
              <Reading />
            </el-icon>分类</el-menu-item>
          <el-menu-item index="/TagView"><el-icon>
              <PriceTag />
            </el-icon>标签</el-menu-item>
        </el-sub-menu> 
        <el-sub-menu index="3">
          <template #title><el-icon>
              <Menu />
            </el-icon>项目</template>
          <el-menu-item index="3-1"><el-icon>
              <Menu />
            </el-icon>1</el-menu-item>
          <el-menu-item index="3-2"><el-icon>
              <Menu />
            </el-icon>2</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="4"><el-icon>
            <Message />
          </el-icon>资源</el-menu-item>
        <el-menu-item index="5"><el-icon>
            <Position />
          </el-icon>关于</el-menu-item>
        <el-menu-item index="/AdminLogin"><el-icon>
            <User />
          </el-icon>登录</el-menu-item>
      </el-menu>
    </div>
  </el-affix>
  </template>
    
  <script lang="ts" setup>
  import { ref,defineExpose  } from 'vue'
  import { User, Position, Message, Menu, House, Star, Collection, PriceTag, Picture, ChatLineSquare, Reading } from '@element-plus/icons-vue'
  
  

  
  const activeIndex = ref('1')
   /* const handleSelect = (key: string, keyPath: string[]) => {
  //console.log(key, keyPath)
  } */
  defineExpose({
  // 在这里添加需要导出的属性和方法
})
  </script>
    
  <style lang="scss" scoped>
  .flex-grow {
    flex-grow: 1;
  }
  
  .el-menu-demo {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  }
  
 /*  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    transition: all .3s ease;
  } */
  </style>